<template>
    <div class="card">
        <div style="display: flex;">
            <el-input v-model="data.search" placeholder="请输入公司名查询" style="width: 30%;"></el-input>
            <el-button style="margin-left: 10px;" type="primary" @click="load()">查询</el-button>
            <el-button style="margin-left: 10px;" @click="reset()">重置</el-button>
        </div>

        <el-table :data="data.pensionList" stripe :default-sort="{ prop: 'pensionTime', order: 'descending' }">
            <el-table-column label="征集流水号" prop="serialNumber" />
            <el-table-column label="公司名称" prop="enterpriseName" />
            <el-table-column label="税务机关名称" prop="taxAuthority" />
            <el-table-column label="缴纳日期" prop="pensionTime" sortable />
            <el-table-column label="应缴金额" prop="pensionMoney" />
            <el-table-column label="费款属期" prop="pensionTerm" />
        </el-table>
        <div style="margin-top: 15px;">
            <el-pagination v-model:current-page="data.pageNumber" v-model:page-size="data.pageSize"
                :page-sizes="[1, 5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="data.total"
                @size-change="load()" @current-change="load()" />
        </div>
    </div>
</template>
<script setup>
import request from '@/utils/request';
import { reactive } from 'vue';

const data = reactive({
    pageNumber: 1,
    pageSize: 5,
    total: 0,
    pension: {
        enterpriseId: '',
        enterpriseAddress: '',
        bossName: '',
        phone: '',
        idNumber: '',
        taxNumber: '',
        enterpriseName: '',
        username: '',
        password: '',
        pensionId: "",
        pensionTerm: "",
        pensionTime: "",
        pensionMoney: "",
        taxAuthority: "",//税务机关名称
        serialNumber: "",//自动生成，就是企业缴纳社保记录的id，规则为TS(唐山市)YL(养老)20250328(日期)0001
    },
    enterpriseList: [],//企业列表
    pensionList: [],//用于表格展示数据
    search: "",//用于搜索
})


const load = () => {//加载所有员工
    request.get('/pension/searchPage', {
        params: {
            pageNumber: data.pageNumber,
            pageSize: data.pageSize,
            enterpriseName: data.search,
        }
    }).then(res => {
        const flatData = res.data.list.flatMap(item => {//将数据扁平化处理
            // 如果没有pensionList，则返回一个空对象，避免后续处理出错
            if (item.pensionList.length === 0) {
                return [{
                    ...item,
                    pensionId: "",
                    pensionTerm: "",
                    pensionTime: "",
                    pensionMoney: "",
                    taxAuthority: "",//税务机关名称
                    serialNumber: "",
                }]
            }
            return item.pensionList.map(p => ({
                ...item,
                ...p // pension字段展开到外层
            }))
        })
        data.pensionList = flatData
        data.total = res.data.total
    })
}
load()
const reset = () => {
    data.search = ""
    data.pageNumber = 1
    load()
}


</script>

<style scoped></style>